// 1. 导入包
//必须这么写
import React from 'react'
import ReactDOM from 'react-dom'

//2. 创建虚拟dom 元素
/**
 * 参数1: 创建的元素类型,字符串,表示元素的名字
 * 参数2: 是一个对象或 null, 表示当前这个Dom 元素的属性
 * 参数3: 子节点 (包括 其他 虚拟Dom 获取文本子节点)
 * 参数n: 其他子节点
 */
const myH1 = React.createElement('h1', { id: 'aaa' }, '这是一个h1标题', 'fasdfasdfasfdaf')
const a = 123
const arr = Array.apply(null, { length: 10 }).map((item, index) => index)
const html1 = (
	<div title={arr}>
		这是fsadfadfdasadf{a}
		<h1>hello world</h1>
		{arr.map((item) => (
			<h1 key={item}>{item}</h1>
		))}
	</div>
)
//3. 渲染到页面中
/**
 * 参数1. 要选让的那个虚拟DOM 元素
 * 参数2. 指定页面上一个容器(dom对象)
 */

///组件
function Hello(props) {
	return (
		<div>
			<h1>hello world</h1>
			姓名: {props.name}
			年龄: {props.age}
			性别: {props.sex}
		</div>
	)
}
let html2 = (
	<div>
		<Hello name={'张三'}></Hello>
	</div>
)
let a1 = {
	name: '张三',
	age: '14',
	sex: '女',
}
let html3 = (
	<div>
		<Hello {...a1}></Hello>
	</div>
)

let html4 = (
	<div>
		<Hello1 {...a1}></Hello1>
	</div>
)

//使用单文件组件
import Hello1 from '@/components/hello'
import Hello2 from '@/components/class_hello'
ReactDOM.render(<Hello2></Hello2>, document.getElementById('app'))
